<template>
  <el-dialog
    title="选择课程"
    :visible="visible"
    width="80%"
    top="8vh"
    :close-on-click-modal="false"
    :before-close="handlerClose"
  >
    <el-row v-if="visible" type="flex" justify="space-between" class="select-container">
      <!-- 左侧选择内容 start-->
      <div class="choose-course left-container">
        <el-row type="flex" align="middle" justify="start" class="course-header">
          <el-cascader v-model="category" :options="options" clearable size="small" @change="loadData" />
          <el-input v-model="searchTitle" class="input" placeholder="请输入课程名称" size="small" @change="loadData" />
        </el-row>
        <el-row type="flex" class="course-main">
          <div class="left">
            <div class="title">课程类型</div>
            <div class="material-tree">
              <div v-for="node in types" :key="node.id">
                <el-row type="flex" align="middle" justify="space-between" class="custom-tree-node__content">
                  <el-row
                    type="flex"
                    class="item-box"
                    align="middle"
                    justify="space-between"
                    @click.native="selectCourseType(node.id)"
                  >
                    <i class="el-icon-folder-opened" />
                    <div class="text">{{ node.title }}</div>
                  </el-row>
                </el-row>
              </div>
            </div>
          </div>
          <div class="right">
            <el-scrollbar>
              <div class="right-main">
                <el-row :gutter="20">
                  <el-col v-if="!datas || datas.length == 0" :span="24">暂无课程</el-col>
                  <el-checkbox-group v-else v-model="checkedValues" class="list-box" :max="limit">
                    <el-col v-for="(item, index) in datas" :key="index" :span="12">
                      <el-checkbox class="content" :label="item.id" @change="pushChecked(item)">
                        <div class="tag">
                          <i class="Angle" />
                          <i class="el-icon-check" />
                        </div>
                        <el-row type="flex" class="file-item">
                          <div class="picture">
                            <el-image :src="item.cover_url">
                              <div slot="error" class="image-slot"><i class="el-icon-document" /></div>
                            </el-image>
                          </div>
                          <el-row type="flex" justify="space-between" class="info">
                            <el-tooltip effect="dark" :content="item.title" placement="bottom">
                              <div class="name">{{ item.title }}</div>
                            </el-tooltip>
                            <el-row v-if="item.scribing_price == 0 && item.price == 0" type="flex">
                              <div class="free-price">免费</div>
                            </el-row>
                            <el-row v-else type="flex">
                              <div v-if="item.scribing_price > 0" class="scribing-price">
                                {{ item.scribing_price | moneySymbol }}
                              </div>
                              <div v-if="item.price != 0" class="price">{{ item.price | moneySymbol }}</div>
                              <div v-else class="free-price">免费</div>
                            </el-row>
                          </el-row>
                        </el-row>
                      </el-checkbox>
                    </el-col>
                  </el-checkbox-group>
                </el-row>
              </div>
            </el-scrollbar>
          </div>
        </el-row>
      </div>
      <!-- 左侧选择内容 end-->
      <!-- 右侧显示内容 start-->
      <div class="right-container">
        <div class="title">已选课程</div>
        <el-scrollbar v-if="checkedList.length" class="scrollbar">
          <ul class="checked-list-ul">
            <li v-for="item in checkedList" :key="item.value">
              <el-row type="flex" justify="space-between">
                <text-tooltip :ref-name="'checked_'+item.value" :width="154" :content="item.title">
                  <span>{{ item.title }}</span>
                </text-tooltip>
                <i class="el-icon-close" @click="removeChecked(item.value)" />
              </el-row>
            </li>
          </ul>
        </el-scrollbar>
        <el-empty v-else description="请选择课程">
          <template v-slot:image>
            <span />
          </template>
        </el-empty>
      </div>
      <!-- 右侧显示内容 end-->
    </el-row>
    <el-pagination
      :current-page.sync="paginate.page"
      :page-size="paginate.count"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <!--  下一步  -->
    <el-dialog
      width="30%"
      title="有效期"
      :visible.sync="innerVisible"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handlerInnerClose"
    >
      <el-row v-if="innerVisible" type="flex" justify="space-between" class="select-container">
        <el-input v-model="term" placeholder="请输入有效期天数" clearable /><span class="date">天</span>
      </el-row>
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" @click="handlerConfirm">确认</el-button>
      </div>
    </el-dialog>
    <div slot="footer" class="choose-footer">
      <!--<el-button type="primary" size="small" @click="handlerConfirm">确认</el-button>-->
      <el-button type="primary" size="small" @click="nextStep">下一步</el-button>
      <el-button size="small" @click="handlerClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChooseStudentCourseDialog', // 选择课程弹出层
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 9999
    },
    sid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      response: null,
      paginate: {
        count: 20,
        page: 1
      },
      category: [0],
      options: [],
      searchTitle: '',
      currentType: 0,
      checkedList: [],
      checkedValues: [],
      innerVisible: false,
      term: ''
    };
  },
  computed: {
    types() {
      if (this.response) {
        return this.response.data.types;
      }
      return [];
    },
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  created() {
    this.loadData();
    this.getCategoryCascader();
  },
  methods: {
    // 获取分类树形结构
    getCategoryCascader: function () {
      this.$http.get(
          '/course/admin/agent/school/' + this.sid + '/courseCategory/cascader',
          {},
          response => {
            this.options = response.data;
          },
          _ => {
          },
          false
      );
    },
    // 获取课程数据
    loadData() {
      const [category = 0] = [...this.category].reverse();
      this.$http.get(
          '/course/admin/agent/school/' + this.sid + '/courseList',
          {
            ...this.paginate,
            title: this.searchTitle,
            type: this.currentType,
            category: category,
            mhm_id: this.$route.query.mhm_id
          },
          response => {
            this.response = response;
            if (this.checkedList.length == 0) {
              this.checkedList = response.data.checked;
            }
          },
          _ => {
          },
          false
      );
    },
    // 选择课程类型
    selectCourseType: function (id) {
      this.currentType = id;
      this.paginate = {
        count: 20,
        page: 1
      };
      this.loadData();
    },
    handleCurrentChange: function (page) {
      this.paginate.page = page;
      this.loadData();
    },
    // 下一步
    nextStep() {
      if (this.checkedValues.length === 0) {
        this.$message.warning('请选择课程')
        return
      }
      this.innerVisible = true;
    },
    handlerInnerClose() {
      this.innerVisible = false;
      this.$emit('cancel');
    },
    // 确认
    handlerConfirm() {
      if (!this.term) {
        this.$message.warning('请输入有效期天数')
        return
      }
      this.$emit('submit', this.checkedValues, this.checkedList, this.term);
    },
    // 关闭弹出层
    handlerClose() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
    },
    // 添加选中
    pushChecked(row) {
      const { id: value, title } = row
      const checkedValues = this.checkedList.map(item => item.value)
      if (!checkedValues.includes(value)) {
        this.checkedList.push({
          title,
          value
        })
        this.checkedValues = this.checkedList.map(item => item.value)
      } else {
        this.removeChecked(value)
      }
    },
    // 移除选中
    removeChecked(value) {
      const index = this.checkedList.findIndex(item => item.value === value);
      this.checkedList.splice(index, 1);
      this.checkedValues = this.checkedList.map(item => item.value)
    }
  }
};
</script>

<style lang="scss" scoped>
.file-item {
  border: 1px solid #ececec;
  padding: 5px;
  width: max-content;

  .picture {
    padding-top: 56px;
    width: 56px;
    height: 0;
    position: relative;
    flex-shrink: 0;

    .el-image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;

      ::v-deep.image-slot {
        font-size: 36px;
      }
    }
  }

  .info {
    margin-left: 10px;
    flex: 1;
    flex-direction: column;

    .name {
      width: 100%;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .desc {
      color: #909399;
      font-size: 12px;
    }

    .price {
      color: $price-color;
    }

    .scribing-price {
      text-decoration: line-through;
      color: $scribing-price-color;
      margin-right: 5px;
    }

    .free-price {
      color: $free-price-color;
    }
  }
}

::v-deep.el-form-item {
  margin-bottom: 22px !important;
}

.choose-course {
  .course-header {
    .input {
      width: 220px;
      margin-left: 10px;
    }

    .link {
      margin-left: 10px;
    }
  }

  .course-main {
    margin-top: 30px;

    .left,
    .right {
      border: 1px solid #e4e7ed;
    }

    .left {
      width: 244px;
      margin-right: 20px;

      .title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        line-height: 50px;
        padding: 0 14px;
      }

      .material-tree {
        // height: calc(100vh - 275px);
        position: relative;

        .custom-tree-node__content {
          padding: 0 15px;
          height: 40px;

          .text {
            font-size: 13px;
            color: #606266;
          }

          .item-box {
            cursor: pointer;
          }
        }

        .custom-tree-node__children {
          .custom-tree-node {
            padding-left: 30px;
            padding-right: 15px;
            height: 40px;

            .item-box {
              flex: 1;
              cursor: pointer;
            }

            .text {
              flex: 1;
              height: 40px;
              line-height: 40px;
              font-size: 13px;
              color: #606266;
            }

            .el-icon-circle-plus-outline {
              font-size: 18px;
              color: $text-color-primary;
              cursor: pointer;
            }
          }
        }

        .el-icon-folder-opened {
          font-size: 16px;
          color: $text-color-primary;
          margin-right: 6px;
        }
      }
    }

    .right {
      height: 370px;
      flex: 1;

      .right-main {
        padding: 20px 20px 0;

        .list-box {
          width: 100%;
        }
      }

      .content {
        display: block;
        margin-bottom: 15px;
        padding: 12px 10px;
        border: 1px solid #e4e7ed;
        position: relative;

        &.is-checked {
          border-color: $text-color-primary;
        }

        .file-item {
          border: none;
          width: auto;

          .info {
            .name {
              width: 180px;
            }
          }
        }

        .el-radio__input.is-checked + .el-radio__label .tag {
          opacity: 1;
        }

        .tag {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 10;
          opacity: 0;

          .Angle {
            position: absolute;
            right: -13px;
            top: -13px;
            width: 0;
            height: 0;
            border: 13px solid transparent;
            border-top-color: $text-color-primary;
            transform: rotate(-135deg);
          }

          .el-icon-check {
            position: absolute;
            right: 0;
            top: -1px;
            color: #fff;
            font-size: 12px;
          }
        }

        ::v-deep.el-checkbox__input {
          position: absolute;
          opacity: 0;
          top: 0;
        }

        ::v-deep.el-checkbox__label {
          display: block;
          padding-left: 0;
          line-height: 1;
        }

        ::v-deep.el-radio__inner {
          position: absolute;
          opacity: 0;
          top: 0;
        }

        .el-checkbox__input.is-checked + .el-checkbox__label .tag {
          opacity: 1;
        }
      }
    }

    ::v-deep.el-scrollbar {
      height: 100%;

      .el-scrollbar__wrap {
        overflow-x: auto;
      }
    }
  }
}

.select-container {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;

  .scrollbar {
    height: calc(100% - 42px);
  }

  .left-container {
    width: 70%;
  }

  .right-container {
    width: 20%;
    height: 434px;
    border-left: 1px solid #EBEEF5;
    padding: 6px 0 0 20px;

    .title {
      padding-bottom: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #A4A4A4;
      border-bottom: 1px solid #EBEEF5;;
    }

    .checked-list-ul {
      list-style-type: none;
      padding: 0;
      margin: 20px 0 0 0;

      li {
        &:after {
          content: "";
          display: table;
          clear: both;
        }

        font-size: 14px;
        font-weight: 400;
        color: #5d5d5d;
        margin-bottom: 15px;

        .el-icon-close {
          font-size: 14px;
          cursor: pointer;
          margin-right: 8px;

          &:hover {
            color: #5193FF;
          }
        }
      }
    }
  }

  .date {
    margin-left: 10px;
    line-height: 40px;
  }
}
</style>
